<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">

<head>
	<title>UFD @VERSION demonstration index</title>

	<!--  css for demonstrations / examples  -->    
	<link href="../examples/example.css" rel="stylesheet" type="text/css" />

	<!--  base structure css  -->    
	<link href="../css/ufd-base.css" rel="stylesheet" type="text/css" />
	
	<!--  plain css skin  -->    
	<link href="../css/plain/plain.css" rel="stylesheet" type="text/css" />
	
	<!-- required dependency -->
	<script type="text/javascript" src="../examples/js/jquery-1.4.2.min.js"></script>
<!-- 	<script type="text/javascript" src="js/ui.core.js"></script> -->
	<script type="text/javascript" src="../examples/js/jquery-ui-1.8.js"></script>
	<!--  if you want iE6 not to poke select boxes thru your dropdowns, you need ... -->
	<script type="text/javascript" src="../examples/js/jquery.bgiframe.min.js"></script>
	
	<!-- Plugin source development location, distribution location: only 1 of 2 is there..	 -->
	<script type="text/javascript" src="../src/jquery.ui.ufd.js"></script>
	
	<script type="text/javascript" src="../examples/js/themeswitchertool.js"></script>
	
	<!-- 
		Firebug lite for iE: 
		Useful to see logging in iE. Can also create a DOM node matching the logSelector option.
	
		<script type='text/javascript' 
	        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
	 -->
	
	<style type="text/css">
	</style>
 </head>
 <body>

	<h1>UFD issue test:</h1>
	<a href="http://code.google.com/p/ufd/issues/detail?id=17">http://code.google.com/p/ufd/issues/detail?id=17</a>
	
	<pre>
 Put a combobox with UFD at a Modal PopUp Window (window.showModalDialog) 
inside a div, like this: 

&lt;div style="overflow: auto; height: 633px;">
  //combobox
&lt;/div>

2. When the scrollbar appear, the combo doesn't move with the contents  
page, only on mouse hover or mouse click.

	</pre>

	<p>
		Toolman: 
			the showmodalDialog is not related, any scrollable sub-panel will suffer from this iE6-7 bug
		
			There is a fix; if you add "position: relative;" to the container DIV, 
			the input scolls with its container. This is a common  iE6-7 bug, see here: 
			<a href="http://www.rowanw.com/bugs/overflow_relative.htm">http://www.rowanw.com/bugs/overflow_relative.htm</a>
	</p>
	<p>		

			Unfortunaltely, there is a related bug, as the dropdown doesn't follow relative scroll in any browser, 
			as its attached near root to overcome iE6 z-index bugs :/	
			
			Logged here:  <a href="http://code.google.com/p/ufd/issues/detail?id=52">http://code.google.com/p/ufd/issues/detail?id=52</a>
			
			 	
	</p>


	<script type="text/javascript" >
	$(function () {
		$(".basic-combo").ufd();
	});    
    </script>
    
    <div style="overflow: auto; height: 100px; ">
		Broken
		<hr/>
		<br/>
		<hr/>
		<br/>
		<select class="basic-combo" name="basic-combo">
			<option value="Afghanistan">Afghanistan</option>
		</select>
		<hr/>
		<br/>
		<hr/>
		<br/>
		<hr/>
		<br/>
	</div>
	
<!--
    	http://www.rowanw.com/bugs/overflow_relative.htm
     	
     	solution to iE6-7 peekaboo bug: add position: relative; to div container 
-->
	
    <div style="overflow: auto; height: 100px; position: relative;">
    	Fixed position 
		<hr/>
		<br/>
		<hr/>
		<br/>
		<select class="basic-combo" name="basic-combo">
			<option value="Afghanistan">Afghanistan</option>
		</select>
		<hr/>
		<br/>
		<hr/>
		<br/>
		<hr/>
		<br/>
	</div>
  </body>
</html> 
